<!-- home -->
<template>
  <div class="container">
    <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" style="padding: 10px">
      请上传身份证的正反面进行身份审核。<br />
      认证通过后可使用更多功能。
    </van-notice-bar>
    <van-cell-group>
      <van-cell title="身份认证状态" :value="isAuthText" />
      <van-cell title="证件类型" :value="cardTypeMap[userInfo.cardtype]" />
      <van-cell title="证件号码" :value="userInfo.cardno" />
      <!-- <van-cell v-if="inviter" title="邀请人" :value="inviter" /> -->
    </van-cell-group>
    <div class="card" v-show="isAuthText == '未认证'|| isAuthText == '认证失败'">
      <van-cell value="点击上传身份证照片" :border="true" />
      <!-- <van-field
        v-model="cacheInviter"
        type="tel"
        label="邀请码"
        placeholder="请输入邀请码(选填)"
        style="margin-bottom: 10px"
        :border="false"
        :maxlength="4"
      /> -->
      <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      <van-button type="info" block style="margin-top: 10px" @click="uploadFile" v-show="fileList.length"
        >提交审核</van-button
      >
    </div>
    <div class="card" v-show="isAuthText !== '未认证'&& isAuthText !== '认证失败'">
      <van-cell value="已提交身份证照：" :border="false" />
      <van-row type="flex" align="center" gutter="10">
        <van-col span="12" v-for="(item, index) in imgList" :key="index" style="margin-bottom: 5px; position: relative">
          <img :src="item" class="xcImg" @click="showImg(index)" />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
// 请求接口
import { uploadCard, uploadCardUrl, getCardPath,getH5UserInfo } from '@/api/user.js'
import { mapGetters } from 'vuex'
import { ImagePreview, Toast, Dialog } from 'vant'
export default {
  data() {
    return {
      fileList: [],
      imgList: [],
      // 邀请码
      cacheInviter: '',
      inviter: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'isAuth', 'isAuthText', 'WxInfo', 'cardTypeMap'])
  },
  mounted() {
    console.log('isAuthText',this.isAuthText)
    // 默认获取已提交的身份证照片
    this.initData()
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // let fd = new FormData()
      // if (Array.isArray(file)) {
      //   file.forEach(function (v) {
      //     fd.append('files', v.file)
      //   })
      // } else {
      //   fd.append('files', file.file)
      // }
      // uploadCard(fd).then(res => {
      //   console.log(res)
      // })
      // uploadCard()
      // uploadCardUrl({ filepaths: 'www.baidu.com' }).then(res => console.log(res))
      // getCardPath().then(res => {
      //   console.log(res)
      // })
    },
    // 提交身份证
    async uploadFile() {
      let fd = new FormData()
      this.fileList.forEach(function (v) {
        fd.append('files', v.file)
      })
      let toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '正在提交'
      })
      try {
        // 获取图片上传后的回调路径
        const { data } = await uploadCard(fd)
        // 提交路径到审核接口
        const { code, msg } = await uploadCardUrl({ filepaths: data.toString(), inviter: this.cacheInviter })
        // 提交成功后转换待审核模式
        if (code == 200) {
          // this.$store.dispatch('setUserInfo')
          this.initData()
          Dialog.alert({
            message: msg
          })
        }
      } finally {
        toast.clear()
      }
    },
    // 图片展示
    showImg(index) {
      var option = {
        images: this.imgList,
        startPosition: index,
        showIndicators: true
      }
      ImagePreview(option)
    },
    // 初始化图片数据 filePaths
    initData() {
      getCardPath().then(res => {
        const { filePaths } = res.data
        this.imgList = filePaths
      })
      this.$store.dispatch('setUserBaseInfo')
      // getH5UserInfo().then(res => {
      //   console.log('getH5UserInfo card',res.data.ckfUserbase)
      //   this.$store.dispatch('setUserBaseInfo',res.data.ckfUserbase)
      // })
    }
  }
}
</script>
<style lang="scss">
.xcImg {
  width: 100%;
  height: auto;
}
body {
  background: #f6f6f6;
}
.card {
  margin: 10px 0;
  background: white;
  padding: 10px;
}
</style>
